<!--suppress ALL -->
<template>
    <div class="page" data-page="unitSafetyExponentMore" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click=$root.backToTab()>
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">单位实时安全指数</div>
        </div>
        <div class="content-block myBlock" style="padding: 0;">
            <div class="troubleApply-type">
                <div id="tb-safety-all" class="select">全部</div>
                <div id="tb-safety-risk" class="">告急(0)</div>
                <div id="tb-safety-danger" class="">危险(0)</div>
                <div id="tb-safety-safe" class="">安全(0)</div>
            </div>
        </div>
        <div class=" page-content infinite-scroll-content;" @ptr:refresh="refreshFirstRank">

            <div class="content-block" style="margin-top: 20px;overflow: auto;height: calc(100% - 145px)">
                <!-- 全部 s-->
                <!-- <div class="ptr-preloader" style="top:-35px;">
                <div class="preloader color-multi"></div>
                <div class="ptr-arrow"></div>
            </div> -->
                <div class="rdsp-card-con" style="display: block">
                    <ul class="realSafety-more" id="safety-all-list">

                    </ul>
                </div>
                <!-- 安全 -->
                <div class="rdsp-card-con">
                    <ul class="realSafety-more" id="safety-safe-list">

                    </ul>
                </div>
                <!-- 危险 -->
                <div class="rdsp-card-con">
                    <ul class="realSafety-more" id="safety-danger-list">

                    </ul>
                </div>
                <!-- 告急 -->
                <div class="rdsp-card-con">
                    <ul class="realSafety-more" id="safety-risk-list">

                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .troubleApply-type {
        margin: 0 20px;
        display: inline-block;
    }

    .troubleApply-type div {
        padding-bottom: 5px;
        float: left;
        margin-right: 15px;
    }

    .troubleApply-type div.select {
        border-bottom: 2px solid #333;
    }

    #unitSafetyMore ul:before {
        height: 0px;
    }

    #unitSafetyMore ul:after {
        height: 0px;
    }

    .search_top {
        margin-top: 50px;
        width: 100%;
        height: 50px;
        background-color: #fff;
        box-shadow: 1px 1px 11px 1px #cecdcd;
        position: fixed;
        z-index: 3;
    }

    .title {
        padding-right: 56px;
        margin: 0px auto;
    }

    .md .list ul:before {
        height: 0px !important;
        width: 0px !important;
    }

    .md .list ul:after {
        height: 0px !important;
        width: 0px !important;
    }

    .safetUnitName {
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 13px;
    }

    .column {
        height: 7px;
        margin-top: 8px;
        border-top-left-radius: 0px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 0px;
    }

    .pxbtnpic {
        float: right;
        margin-top: 14px;
        width: 20px;
        margin-right: 29px;
    }

    .column_num {
        font-size: 13px;
        color: #666666;
    }
</style>
<script>
    return {
        mounted() {
            var self = this;
            if (single_Orgid == "") {
                self.id_org = userInfor.organizationIds;
            } else {
                self.id_org = single_Orgid;
            }
            self.status = self.$route.params.tabID;
            $(".troubleApply-type div").removeClass('select').eq((self.status)).addClass('select');
            jQuery(".troubleApply-tab-con").eq(status).show().siblings(".troubleApply-tab-con").hide();
            self.status = self.status * 1 + 1;;
            self.getUnitSafetyMoreData(); //获取排名
        },
        data: function () {
            return {
                status: 1,
                list: [],
            }
        },

        methods: {
            //关闭搜索
            clearsearch: function (type, typeName) {
                jQuery("#unitSafetyMore ul").empty();
                var self = this;
                self.getUnitSafetyMoreData();
            },
            //刷新
            refreshFirstRank: function (e, done) {
                if (done && e) {
                    var self = this;
                    var $ = self.$$;
                    setTimeout(function () {
                        $("#unitSafetyMore ul").empty();
                        self.getUnitSafetyMoreData();
                        done();
                    }, 1000);
                }
            },
            getUnitSafetyMoreData: function () {
                common.loading(1);
                var self = this;
                var $ = self.$$;
                var safeCategory = -1;
                if (self.status == 1) {
                    safeCategory = -1;
                } else if (self.status == 2) {
                    safeCategory = 1;
                } else if (self.status == 3) {
                    safeCategory = 2;
                } else if (self.status == 4) {
                    safeCategory = 3;
                }
                Dao.getSafeStatusForOrgCount({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgIds: self.id_org,
                    fireType: -1
                }, function (data) {
                    if (data) {
                        for (var i = 0; i < data.length; i++) {
                            var count = data[i].orgCount;
                            // count = count.toString().length>2?"99+":count;
                            if (data[i].safeCategory == 1) {
                                //针对青海西宁分中心做演示数据
                                if (platformCode == "qhxn" || (platformCode == "chshzhxf" &&
                                        single_Orgid === 153)) {
                                    $('#tb-safety-risk').empty().html("安全(" + (parseInt(count || 0) +
                                        1036) + ")");
                                } else {
                                    $('#tb-safety-risk').empty().html("安全(" + data[i].orgCount + ")");
                                }
                            }
                            if (data[i].safeCategory == 2) {
                                $("#tb-safety-danger").empty().html("危险(" + count + ")");
                            }
                            if (data[i].safeCategory == 3) {
                                $("#tb-safety-safe").empty().html("告急(" + count + ")");
                            }
                        }
                    }
                }, true);
                Dao.getOrgSafetyScore({
                    userName: userInfor.accountName,
                    eviceId: appKeyObj.deviceId,
                    orgIds: self.id_org,
                    safeCategory: safeCategory,
                    sortType: 0,
                    dataType: 0,
                    scoreType: 3,
                    queryType: 0,
                    orgCode: platformCode || app.data.defaultPlatCode
                }, function (data) {
                    self.list = data;
                    self.datalist(data);
                    common.loading(0);
                }, true);
            },
            datalist: function (data) {
                var self = this;
                $("#safety-all-list").empty();
                $("#safety-safe-list").empty();
                $("#safety-danger-list").empty();
                $("#safety-risk-list").empty();
                if (data && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        let _per = data[i].safetyScore % 1 == 0 ? parseInt(data[i].safetyScore) : (data[i]
                            .safetyScore).toFixed(1);
                        if (self.status == 1) {
                            $("#safety-all-list").append(`<li class="clearfix org-item-list" org-id="` + data[i].orgId + `">
                                <div class="left-img" id="` + common.transNullundefined(data[i].orgId) +
                                `_safe_all"><img orgId="` + common.transNullundefined(data[i].orgId) +
                                `" orgName="` + common.transNullundefined(data[i].orgName) + `" src="` +
                                transLogo(data[i].orgLogo) + `"></div>
                                <div class="right-block">
                                    <p class="p-top clearfix">
                                        <span id="` + common.transNullundefined(data[i].orgId) + `_span_all" orgId="` +
                                common.transNullundefined(data[i].orgId) + `" orgName="` + common
                                .transNullundefined(data[i].orgName) + `">` + common.transNullundefined(data[i]
                                    .orgName) + `</span>
                                        <a href="javascript:void(0)">
                                            <em>` + _per + `<i>分</i></em>
                                        </a>
                                    </p>
                                    <p class="p-bottom">
                                        <span id="unit_` + data[i].orgId + `" class="" style="width:` + _per + `%"></span>
                                    </p>
                                </div>
                            </li>`);
                            var score = common.getScore(_per);
                            if (score == 10) {
                                $("#unit_" + data[i].orgId).addClass("orange");
                            } else if (score == 20) {
                                $("#unit_" + data[i].orgId).addClass("red");
                            } else {
                                $("#unit_" + data[i].orgId).addClass("green");
                            }
                        } 
                        else if (self.status == 2) {
                            $("#safety-safe-list").append(`<li class="clearfix org-item-list" org-id="` + data[i].orgId + `">
                                <div class="left-img" id="` + common.transNullundefined(data[i].orgId) +
                                `_safe_all"><img orgId="` + common.transNullundefined(data[i].orgId) +
                                `" orgName="` + common.transNullundefined(data[i].orgName) + `" src="` +
                                transLogo(data[i].orgLogo) + `"></div>
                                <div class="right-block">
                                    <p class="p-top clearfix">
                                        <span id="` + common.transNullundefined(data[i].orgId) + `_span_all" orgId="` +
                                common.transNullundefined(data[i].orgId) + `" orgName="` + common
                                .transNullundefined(data[i].orgName) + `">` + common.transNullundefined(data[i]
                                    .orgName) + `</span>
                                        <a href="javascript:void(0)">
                                            <em>` + _per + `<i>分</i></em>
                                        </a>
                                    </p>
                                    <p class="p-bottom">
                                        <span id="unit_` + data[i].orgId + `" class="" style="width:` + _per + `%"></span>
                                    </p>
                                </div>
                            </li>`);
                            var score = common.getScore(_per);
                            if (score == 10) {
                                $("#unit_" + data[i].orgId).addClass("orange");
                            } else if (score == 20) {
                                $("#unit_" + data[i].orgId).addClass("red");
                            } else {
                                $("#unit_" + data[i].orgId).addClass("green");
                            }
                            // /unitSafetyDetail/` + data[i].orgId + `/`+_per+`/
                        } 
                        else if (self.status == 3) {
                            $("#safety-danger-list").append(`<li class="clearfix org-item-list" org-id="` + data[i].orgId + `">
                                <div class="left-img" id="` + common.transNullundefined(data[i].orgId) +
                                `_safe_all"><img orgId="` + common.transNullundefined(data[i].orgId) +
                                `" orgName="` + common.transNullundefined(data[i].orgName) + `" src="` +
                                transLogo(data[i].orgLogo) + `"></div>
                                <div class="right-block">
                                    <p class="p-top clearfix">
                                        <span id="` + common.transNullundefined(data[i].orgId) + `_span_all" orgId="` +
                                common.transNullundefined(data[i].orgId) + `" orgName="` + common
                                .transNullundefined(data[i].orgName) + `">` + common.transNullundefined(data[i]
                                    .orgName) + `</span>
                                        <a href="javascript:void(0)">
                                            <em>` + _per + `<i>分</i></em>
                                        </a>
                                    </p>
                                    <p class="p-bottom">
                                        <span id="unit_` + data[i].orgId + `" class="" style="width:` + _per + `%"></span>
                                    </p>
                                </div>
                            </li>`);
                            var score = common.getScore(_per);
                            if (score == 10) {
                                $("#unit_" + data[i].orgId).addClass("orange");
                            } else if (score == 20) {
                                $("#unit_" + data[i].orgId).addClass("red");
                            } else {
                                $("#unit_" + data[i].orgId).addClass("green");
                            }
                        } 
                        else if (self.status == 4) {
                            $("#safety-risk-list").append(`<li class="clearfix org-item-list" org-id="` + data[i].orgId + `">
                                <div class="left-img" id="` + common.transNullundefined(data[i].orgId) +
                                `_safe_all"><img orgId="` + common.transNullundefined(data[i].orgId) +
                                `" orgName="` + common.transNullundefined(data[i].orgName) + `" src="` +
                                transLogo(data[i].orgLogo) + `"></div>
                                <div class="right-block">
                                    <p class="p-top clearfix">
                                        <span id="` + common.transNullundefined(data[i].orgId) + `_span_all" orgId="` +
                                common.transNullundefined(data[i].orgId) + `" orgName="` + common
                                .transNullundefined(data[i].orgName) + `">` + common.transNullundefined(data[i]
                                    .orgName) + `</span>
                                        <a href="javascript:void(0)">
                                            <em>` + _per + `<i>分</i></em>
                                        </a>
                                    </p>
                                    <p class="p-bottom">
                                        <span id="unit_` + data[i].orgId + `" class="" style="width:` + _per + `%"></span>
                                    </p>
                                </div>
                            </li>`);
                            var score = common.getScore(_per);
                            if (score == 10) {
                                $("#unit_" + data[i].orgId).addClass("orange");
                            } else if (score == 20) {
                                $("#unit_" + data[i].orgId).addClass("red");
                            } else {
                                $("#unit_" + data[i].orgId).addClass("green");
                            }
                        }
                    }
                    jQuery(".org-item-list").click(function(){
                        let orgId = jQuery(this).attr("org-id");
                        let name = jQuery(this).find("span").html();
                        single_Orgid = orgId;
                        single_OrgName = name;
                        app.router.navigate("/soleKanban/");
                    })
                } else {
                    if (self.status == 1) {
                        $("#safety-all-list").append(`<div class="no-data-img"><img src="` + listNoDataPic() +
                            `"/></div>`);
                    } else if (self.status == 2) {
                        $("#safety-safe-list").append(`<div class="no-data-img"><img src="` + listNoDataPic() +
                            `"/></div>`);
                    } else if (self.status == 3) {
                        $("#safety-danger-list").append(`<div class="no-data-img"><img src="` + listNoDataPic() +
                            `"/></div>`);
                    } else if (self.status == 4) {
                        $("#safety-risk-list").append(`<div class="no-data-img"><img src="` + listNoDataPic() +
                            `"/></div>`);
                    }
                }

            }
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                var app = self.$app;
                var $ = self.$$;
                self.status = Number(self.$route.params.tabID) + 1 || 1;
                jQuery(".troubleApply-type div").click(function (e) {
                    if (getClickEnabel()) {
                        var tab_index = jQuery(".troubleApply-type div").index(e.currentTarget);
                        jQuery(e.currentTarget).addClass("select").siblings().removeClass("select");
                        jQuery(".troubleApply-tab-con").eq(tab_index).show().siblings(
                            ".troubleApply-tab-con").hide();
                        // tab_index 0 整改中 1核实中 2已完成
                        if (tab_index == 0) {
                            self.status = 1;
                            $("#safety-all-list").empty();
                        } else if (tab_index == 1) {
                            self.status = 2;
                            $("#safety-safe-list").empty();
                        } else if (tab_index == 2) {
                            self.status = 3;
                            $("#safety-danger-list").empty();
                        } else if (tab_index == 3) {
                            self.status = 4;
                            $("#safety-risk-list").empty();
                        }
                        self.getUnitSafetyMoreData();
                    }
                });
                jQuery("#nuitsort").keypress(function (event) {
                    if (event.which == 13) {
                        self.selectContent = $("#nuitsort")[0].value;
                        $("#unitSafetyMore ul").empty();
                        self.getUnitSafetyMoreData();
                        $("#nuitsort").blur();
                    };
                });
            },
        }
    }
</script>